<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wy{
            width: 200px;
            height: 400px;
            margin: auto;
            border: 2px solid #000;
            border-radius: 10px;

        }
        #con{
            width: 180px;
            height: 2px;
            background-color: #000;
            margin: 10px auto ;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="wy">
        <input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;" id="baba">反选</a>
        <div id="con">
        <p><input type="checkbox" name="item" /><label>选项（一）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（二）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（三）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（四）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（五）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（六）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（七）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（八）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（九）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（十）</label></p>
        </div>
    </div>
</body>
<script>
    function wy (){
       var input = document.getElementById('checkAll')
       var baba = document.getElementById('baba')
       var con = document.getElementById('con').getElementsByTagName('input')
       for (let cc = 0; cc < con.length; cc++) {
        con[cc].onclick = function (){
            console.log(con[cc].checked,cc);
            hh()
        }
       }
       input.onclick = function (){
        // var con = document.getElementById('con').getElementsByTagName('input')
        console.log(input.checked);
        for (let i = 0; i < con.length; i++) {
            con[i].checked = input.checked
            
        }
       }
       baba.onclick = function (){
        // var con = document.getElementById('con').getElementsByTagName('input')
        for (let n = 0; n < con.length; n++) {
            con[n].checked = !con[n].checked
            
        }
        hh()
       }
       function hh (){
        var flag = true
        // var con = document.getElementById('con').getElementsByTagName('input')
        for (let h = 0; h < con.length; h++) {
            if(!con[h].checked){
              flag = false
            }
            
        }
        input.checked=flag
    }
    }
    wy()
</script>
</html>